
<template>
  <div>
    <!--上面的input框和select-->
    <TopFilter ref="topFilter" :list="topFilterList" labelWidth="110" @filterChange="changeHandle"
               @resetChange="resetChange" @onCollapse="collapseHandle" ></TopFilter>
    <!-- 弹框 -->
    <Drawer
      :visible.sync="visiable"
      title='充电桩权益明细'
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}">
      <detail @close="close" :formData="top" />
    </Drawer>

    <!-- table表格 -->
    <FilterTable ref="table" :columns="columns" :fetchapi="fetchapi" :params="fetchParams" :datakey="'records'"
                 :isSelectColumn="false" :onColumnsChange="columns => (this.columns = columns)"
                 :onRowSelectChange="arr => (this.selectColumn = arr)" :isPagination = false
                 >
<!--  :isExportExcel2="true"    :exportFileName="'充电桩权益导出.xlsx'"-->
      <template slot="controls">
        <multiuse-button size="small" type="primary" :click="exportData.bind()">导出</multiuse-button>
      </template>
    </FilterTable>

    <BaseDialog title="经销商查询" :visible.sync="isShowSearchCustomer" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <SearchCustomer :customerNo="kehuxuanze" @close="isShowSearchCustomer = false" @addCustomerCode="confirmSearchCustomer" />
    </BaseDialog>

  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import ownerSeacher from './ownerSeacher';
import SearchCustomer from './SearchCustomer';
import detail from './detail';
import { exportExcelFile } from '@/utils';
import {getBrandLists,getStatus,queryOrderRights,getListForExportChang}from '@/api/repair/chongDianZhuang';
import moment from "moment";

export default {
  name: 'Query',
  components: {
    detail,
    ownerSeacher,
    SearchCustomer
  },
  mixins: [dictionary],
  data() {
    return {
      topFilterList: this.createTopFilterList(),
      columns: this.createTableColumns(),
      fetchapi: queryOrderRights,// 后端API
      fetchParams: { xhrAbort: false ,
        //赋值开始时间在拼接时分秒
        receiveDateStart: moment(new Date()).subtract(1,'months')
          .format('YYYY-MM-DD').split(' ')[0] + ' 00:00:00',
        //赋值结束时间在拼接时分秒
        receiveDateEnd:   moment(new Date())
          .format('YYYY-MM-DD').split(' ')[0] + ' 23:59:59',
        //给默认查询数据权益类型赋值默认值
        rightsType: 30,
        //给默认查询数据给权益名称赋值默认值
        rightsNameList:  ["7KW充电桩"]
      },
      visiable: false,
      handleType: '',
      params: {},
      kehuxuanze: '',
      formData: {},
      resData: {},
      title: '',
      top: {},
      initData: {},
      rowSelectData: [],
      selectColumn: [],
      isShowSearchCustomer: false,
      dealerCompanyCode:'',
      shuju:[],
    }
  },


  created() {

    this.getDictBrandList()
    this.status()

  },


  methods: {

    createTopFilterList() {
      return [
        {
              type: 'SELECT',
              label: '权益类型',
              fieldName: 'rightsType',
              placeholder: '请选择',
              initialValue: '30',
              clearable:false,
              itemList: [],
              change: val => {
                this.TypeOfEquity(val);
              }
            },
            {
              type: 'MULTIPLE_SELECT',
              label: '权益名称',
              fieldName: 'rightsNameList',
              placeholder: '请选择',
              initialValue: ["7KW充电桩"],
              itemList: [],
            },
        {
              type: 'MULTIPLE_SELECT',
              label: '权益使用状态',
              fieldName: 'useStatusList',
              placeholder: '请选择',
              itemList: [],
            },


            {
              type: 'INPUT',
              label: '使用人手机号',
              fieldName: 'mobile',
            },
        {
              type: 'INPUT',
              label: '预订单号',
              fieldName: 'orderMainId',
            },

        {
          type: 'RANGE_DATE',
          label: '权益领取日期',
          fieldName: 'receiveDateStart|receiveDateEnd',
          initialValue: [
            moment(new Date()).subtract(1,'months')
            .format('YYYY-MM-DD'),
            moment(new Date())
              .format('YYYY-MM-DD')],
          dateType: 'daterange',
          style: { minWidth: '200px' },
          // rangeSeparator: '至'
        },

        {
          type: 'INPUT',
          label: '经销商代码',
          fieldName: 'dealerCode',
          readonly: true,
          unitRender: () => {
            return (
              <el-button
                icon="el-icon-search"
                onClick={() => {
                  this.isShowSearchCustomer = true;
                }}
              ></el-button>
            );
          },
          onEnter: val => {
            console.log('对方经销商 onEnter');
            this.isShowSearchCustomer = true;
          }
        },
        {
          type: 'INPUT',
          label: '经销商简称',
          fieldName: 'dealerShortname',
        },

      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          fixed: 'left',
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column_action',
          width: 100,
          fixed: 'left',
          render: props => {
            return (
              <div>
                <el-divider direction="vertical" />
                <el-button size="mini" type="text" onClick={() => this.detailHandle(props.row,)} >
                  明细
                </el-button>
              </div>
            );
          }
        },
        {
          title: '经销商代码',
          dataIndex: 'dealerCode',
          sorter: true
        },
        {
          title: '经销商名称',
          dataIndex: 'dealerName',
          sorter: true
        },
        {
          title: '销售订单编号',
          dataIndex: 'soNo',
          sorter: true,
          precision: 2
        },
        {
          title: '预订单号',
          dataIndex: 'preOrderNo',
          sorter: true
        },
        {
          title: '权益类型',
          dataIndex: 'rightsTypeName',
          sorter: true,

        },
        {
          title: '权益名称',
          dataIndex: 'rightsName',
          sorter: true,

        },
        {
          title: '权益支付金额',
          dataIndex: 'payAmount',
          sorter: true,
          precision:2,
        },
        {
          title: '权益使用状态',
          dataIndex: 'useStatusName',
          sorter: true
        },
        {
          title: '订单类型',
          dataIndex: 'salesTypeName',
          sorter: true
        },
        {
          title: '客户姓名',
          dataIndex: 'customerName',
          sorter: true
        },
        {
          title: '客户手机号',
          dataIndex: 'customerTel',
          sorter: true
        },
        {
          title: 'VIN',
          dataIndex: 'vin',
          width: 150,
          sorter: true
        },
        {
          title: '车系',
          dataIndex: 'seriesName',
          width: 150,
          sorter: true
        },
        {
          title: '车型',
          dataIndex: 'modelName',
          width: 150,
          sorter: true
        },
        {
          title: '销售顾问',
          dataIndex: 'consultantName',
          sorter: true
        },
        {
          title: '数据来源',
          dataIndex: 'orderSourceName',
          sorter: true
        },
        {
          title: '销售订单创建时间',
          dataIndex: 'sheetCreateDate',
          sorter: true,
          dateFormat: 'yyyy-MM-dd HH:mm:ss',
        },
        {
          title: '权益领取时间',
          dataIndex: 'receiveDate',
          sorter: true,
          dateFormat: 'yyyy-MM-dd HH:mm:ss',
        },
        {
          title: '权益支付时间',
          dataIndex: 'payDate',
          sorter: true,
          dateFormat: 'yyyy-MM-dd HH:mm:ss',
        },
        {
          title: '权益退款时间',
          dataIndex: 'refundDate',
          sorter: true,
          dateFormat: 'yyyy-MM-dd HH:mm:ss',
        }
      ];
    },

    //导出
    async exportData() {
      let params = { ...this.fetchParams };
      console.log(params, '导出::');
      let res = await getListForExportChang(params);
      console.log(res.data, '导出::');
      try {
        exportExcelFile(res.data, '充电桩管理');
      } catch (e) {
        console.log(e, '错误::');
      }
    },



    //使用状态查询
    async status(){
      console.log("状态使用状态//////////////");
      const res = await getStatus();
      console.log("状态使用状态//////////////",res.data);
      if  (res.resultCode === 200){
        this.topFilterList.find(item=>item.fieldName==='useStatusList').itemList = res.data.map(x => ({ value: x.code, text: x.name }));
      }
      console.log("状态使用状态//////////////",res.data);
    },

    //权益类型查询赋值
    async getDictBrandList() {
      console.log("打印查询类型日志+++++++++++++++++++++++++++++++++++++")
      //1调接口查出所有数据
      const res = await getBrandLists();
      console.log("打印查询类型日志+++++++++++++++++++++++++++++++++++++11",res.data)
      if (res.resultCode === 200) {
        console.log(this.topFilterList,"this.topFilterList")
        //去重,把接口的数据
        //  this.delFile = [...new Set(res.data)];
        var rightsType = [];

        var arr = [];
        for(var i=0;i<res.data.length;i++){
          //判断在id这个数组中有没有找到id
          if(rightsType.indexOf(res.data[i].rightsType) == -1){
            //把id用push存进id这个数组中
            rightsType.push(res.data[i].rightsType);
            res.data[i].name = [];
            res.data[i].name.push(res.data[i])
            arr.push(res.data[i]);
          }else {
            arr[rightsType.indexOf(res.data[i].rightsType)].name.push(res.data[i])
          }

        }
        this.shuju = arr;
        console.log("kkkkkkkkkkkkkkkkkkkkk",arr)
        //给权益类型赋值默认值
        this.topFilterList.find(item=>item.fieldName==='rightsType').initialValue = arr[0].rightsType
        //给权益名称赋值默认值
        this.topFilterList.find(item=>item.fieldName==='rightsNameList').initialValue = ["7KW充电桩"]
        //赋值给rightsType下拉框赋值(权益类型)
        this.topFilterList.find(item=>item.fieldName==='rightsType').itemList = arr.map(x => ({ value: x.rightsType, text: x.rightsTypeName, names:x.names }));
        this.topFilterList.find(item=>item.fieldName==='rightsNameList').itemList =arr[0].name.map(x => ({ value: x.rightsName, text: x.rightsName }));
        // this.topFilterList = [...this.topFilterList]
      }
    },



    async TypeOfEquity(val) {
      this.topFilterList.find(item=>item.fieldName==='rightsNameList').initialValue = '';
      if(this.topFilterList.find(item=>item.fieldName==='rightsType').initialValue) return this.topFilterList.find(item=>item.fieldName==='rightsNameList').itemList = [];
      console.log("ccccccccccccc",val)
      if (val) {
        debugger;
        var names  =  this.shuju.find(item=>item.rightsType===val).name

        this.topFilterList.find(item=>item.fieldName==='rightsNameList').itemList = names.map(x => ({ value: x.rightsName, text: x.rightsName }));

      }
    },

    //明细的函数
    detailHandle(e) {
      /* console.info(e + "---------------------------------row") */
      this.top = e;
      this.visiable = true;

    },

    async confirmSearchCustomer(row) {
      console.log(row, 'rowCustomer');
      this.rowData = row[0];
      console.log('row[0].dealerCode--------------', row[0].dealerCompanyCode);
      this.topFilterList.find(x => x.fieldName == 'dealerCode').initialValue = row[0].dealerCode;
      this.topFilterList.find(x => x.fieldName == 'dealerShortname').initialValue = row[0].dealerShortname;
      //赋值公司code
      if (row[0].dealerCompanyCode===''||row[0].dealerCompanyCode === null){
        this.dealerCompanyCode=''
      }else { this.dealerCompanyCode = row[0].dealerCompanyCode;}



    },

    //搜索的
    changeHandle(val) {

      val.receiveDateStart = val.receiveDateStart ? val.receiveDateStart.split(' ')[0] + ' 00:00:00' : '';
      val.receiveDateEnd = val.receiveDateEnd ? val.receiveDateEnd.split(' ')[0] + ' 23:59:59' : '';
      // val.orderStartDate && (val.orderStartDate = val.orderStartDate.split(' ')[0] + ' 23:59:59');
      // val.dealerCode = this.dealerCompanyCode;
      // if (val.rightsType===""){val.rightsType  = this.shuju[0].rightsType}
      // if (val.rightsNameList.length ===0){val.rightsNameList =["7KW充电桩"] }


      console.log('输出的参数', val)


      this.fetchParams = Object.assign({},val,{dealerCompanyCode:this.dealerCompanyCode});
      console.log("收缩总数居33333333333333",this.fetchParams)

    },
    //重置
     resetChange() {
      // this.dataSource = [];
      this.dealerCompanyCode = '';

      // // //给权益类型赋值默认值
      // // this.topFilterList.find(item=>item.fieldName==='rightsType').initialValue = this.shuju[0].rightsType
      // console.log("打印这个权益名称有无赋值", this.shuju[0].rightsType)
      // // //给权益名称赋值默认值
      //  this.topFilterList.find(item=>item.fieldName==='rightsNameList').initialValue = ["7KW充电桩"]
      // // if(this.topFilterList.find(item=>item.fieldName==='rightsType').initialValue) return this.topFilterList.find(item=>item.fieldName==='rightsNameList').itemList = [];
    },
    //展开收起的
    collapseHandle() {
      this.$nextTick(() => {
        // this.params.dealerCompanyCode ===null;
        // this.dealerCompanyCode === null;
        this.BaseTable.EXECUTE_RESET_HEIGHT();
        // console.log("this.params.dealerCompanyCode",this.params.dealerCompanyCode,this.dealerCompanyCode)
      });
    },

    close() {
      this.visiable = false;
    }
  }
}

</script>
